/**
 * Created by yuzhou on 2020/3/29.
 */
//获取
$(document).ready(function () {
    var app = new Vue({
        el: "#whole_box",
        data: {
            markerArr:[{
                title: "信基沙溪",
                content: "我的备注",
                point: "113.342883|23.041577",
                isOpen: 0,
                icon: {w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5}
            }
            ],

            showModalView: false,
            showModal: false,
            showModalView2: false,
            showModal2: false,
            showcategory: false,
            startPoin: "起点:广州白云机场",
            startPointRoute1: "机场快线：乘机场快线7B线从新白云国际机场至丽江明珠酒店下，步行500米至信基沙溪酒店用品博览城",
            startPointRoute2: "出租车：从起点乘坐出租车至信基沙溪酒店用品博览城",
            title_image:"",
            longitude:"",
            latitude:"",

            detailed_guidance:"",
            tab1:"市场介绍",
            tab2:"品牌商家",
            tab3:"联系我们",

            traffic1:"",
            traffic2:"",
            guide1:"",
            guide2:"",
            lanuage_type:"",
            three_box_txt_show:true,

            From_txt:"",

            title_img:"",

            traffic_icon1:"",
            traffic_icon2:"",
        },
        mounted:function(){
            var self = this;
            var market_id = self.getQueryValue("id");
            self.lanuage_type = localStorage.getItem("language");
            if(self.lanuage_type == "cn"){
                self.From_txt = "起点";
                self.detailed_guidance = "详细指引";
                self.tab1 = "市场介绍";
                self.tab2 = "品牌商家";
                self.tab3 = "联系我们";
                if(market_id == 1){
                    self.traffic_icon1 = "/xj/image/airport.png";
                    self.traffic_icon2 = "/xj/image/station1.png";
                    self.title_img = "http://www.xinjisx.com/wx/sx-jt.png";
                    self.traffic1 = "广州白云国际机场";
                    self.traffic2 = "广州南站";
                    self.guide1 = "机场快线：乘机场快线7B线从新白云国际机场至丽江明珠酒店下，步行500米至信基沙溪酒店用品博览城\n\n出租车：从起点乘坐出租车至信基沙溪酒店用品博览城";
                    self.guide2 = "";
                }else if(market_id == 2){
                    self.traffic_icon1 = "/xj/image/airport.png";
                    self.traffic_icon2 = "/xj/image/station1.png";
                    self.title_img = "http://www.xinjisx.com/wx/ht-jt.png";
                    self.traffic1 = "广州白云国际机场";
                    self.traffic2 = "广州南站";
                    self.guide1 = "地铁：乘地铁3号线从机场南站至厦滘站A/B出口\n\n机场快线：乘机场快线7B线从新白云国际机场至丽江明珠酒店下，步行40米到沙溪村公交站乘坐129路、番17路、303路（坐一站）等到五洲装饰城（地铁厦滘站）即达信基豪泰酒店用品城。";
                    self.guide2 = "地铁：乘地铁7号线从广州南站至汉溪长隆站，再转乘地铁3号线从汉溪长隆站至厦滘站A/B出口\n\n出租车：从起点乘坐出租车至信基豪泰酒店用品城";
                }else if(market_id == 3){
                    self.traffic_icon1 = "/xj/image/station1.png";
                    self.traffic_icon2 = "/xj/image/station2.png";
                    self.title_img = "http://www.xinjisx.com/wx/sy-jt.png";
                    self.traffic1 = "沈阳北站";
                    self.traffic2 = "沈阳站";
                    self.guide1 = "地铁：乘地铁2号线从沈阳北站地铁站至蒲河路地铁站B出口，或乘地铁2号线从沈阳北站地铁站至沈阳航空航天大学C出口下车，转381、382、326到龙腾碧玉湾下车即达信基沙溪酒店用品博览城\n\n出租车：从起点乘坐出租车至信基沙溪酒店用品博览城，用时20分钟\n公交车：从沈阳北站乘坐257、106转382、236到龙腾碧玉湾或瀚博皇家御湾下车";
                    self.guide2 = "地铁：乘地铁1号线从沈阳站地铁站至青年大街换成2号线至蒲河路地铁站B出口\n\n出租车：从起点乘坐出租车至信基沙溪酒店用品博览城，用时30分钟\n公交车：从沈阳站乘坐262、328、399、232黄寺广场同站换乘326到龙腾碧玉湾下车即达信基沙溪酒店用品博览城";
                }
            }else{
                self.From_txt = "From";
                self.detailed_guidance = "Traffic Guide";
                self.tab1 = "Market Introduction";
                self.tab2 = "Brand Shops";
                self.tab3 = "Contact Us";
                if(market_id == 1){
                    self.title_img = "http://www.xinjisx.com/wx/sx-jt.png";
                    self.traffic1 = "Guangzhou Baiyun International Airport";
                    self.traffic2 = "Guangzhounan Railway Station";
                    self.guide1 = "Airport Express: Take Airport Express Line 7B from the airport to Lijiang Mingzhu Hotel, and walk 500 meters to Xinji Shaxi Hospitality Supplies EXPO Center.";
                    self.guide2 = "Taxi: Take a taxi to Xinji Shaxi Hospitality Supplies EXPO Center.";
                }else if(market_id == 2){
                    self.title_img = "http://www.xinjisx.com/wx/ht-jt.png";
                    self.traffic1 = "Guangzhou Baiyun International Airport";
                    self.traffic2 = "Guangzhounan Railway Station";
                    self.guide1 = "Metro: Take Metro Line 3 at South Airport station and get off at Xiajiao Station (Exit A/B)\n\nMetro: Take Metro Line 7 at Guangzhounan Railway Station and get off at Hanxi Changlong Station to transfer to Line 3 and get off at Xiajiao Station(Exit A/B)";
                    self.guide2 = "Metro: Take Metro Line 7 at Guangzhounan Railway Station and get off at Hanxi Changlong Station to transfer to Line 3 and get off at Xiajiao Station(Exit A/B)\n\nTaxi: Take a taxi to Xinji Hotelex Hospitality Supplies Center";
                }else if(market_id == 3){
                    self.title_img = "http://www.xinjisx.com/wx/sy-jt.png";
                    self.traffic1 = "Shenyangbei Railway Station";
                    self.traffic2 = "Shenyang Railway Station";
                    self.guide1 = "By Metro: Take Metro Line 2 and get off at Puhe Lu Station (Exit B) or Shenyang Aerospace University (Exit C), and transfer bus 381/382/326 and get off at Longteng Biyuwan station.\n\nBy Taxi: 20 minutes by taxi from Shenyangbei Railway Station\nBy Bus: Take bus 257/106 and transfer bus 382/236 and get off at Longteng Biyuwan or Hanbo Huangjiayuwan station.";
                    self.guide2 = "By Metro: Take Metro Line 1 to Qingnian Street station and transfer to Line 2 and get off at Puhe Lu station (Exit B).\n\nBy Taxi: 30 minutes by taxi from Shenyang Railway Station.\nBy Bus: Take bus 262/328/399/232 to Huangsi Guangchang Station and transfer bus 326 and get off at Longteng Biyuwan station.";
                }
            }

            self.initMap();
            if(market_id == 1){
                self.title_image = "https://www.xinjisx.com/wx/sx-jt.png";
                self.longitude = "113.3356846400";
                self.latitude = "23.0354510600";
            }else if(market_id == 2){
                self.title_image = "https://www.xinjisx.com/wx/ht-jt.png";
                self.longitude = "113.3177230000";
                self.latitude = "23.0365580000";
            }else if(market_id == 3){
                self.title_image = "https://www.xinjisx.com/wx/sx-jt.png";
                self.longitude = "123.3961671300";
                self.latitude = "41.9492745600";
            }
            /*高德*/
            var mapUrl_gd = "http://uri.amap.com/marker?position="+self.longitude+","+self.latitude+"&name=" + "信基沙溪" + "&src=yellowpage&coordinate=gaode&callnative=1";
            $(".mapBtn_g").attr("href", mapUrl_gd);
            /*腾讯*/
            var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:"+self.latitude+","+self.longitude+";title:" + "信基沙溪" + ";addr:" + "信基沙溪" + "&referer=yellowpage"
            $(".mapBtn_t").attr("href", mapUrl_tx);
            /*百度*/
            var mapUrl_bd = "http://api.map.baidu.com/marker?location="+self.latitude+","+self.longitude+"&title=" + "信基沙溪" + "&content=" + "信基沙溪" + "&output=html&src=yellowpage";
            $(".mapBtn_b").attr("href", mapUrl_bd);
            //下拉数据



        },
        methods: {
            getQueryValue:function (a) {
                var query = decodeURI(window.location.search.substring(1));
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == a) { return pair[1]; }
                }
                return null;
            },

            getback:function () {
                window.history.back(-1);
            },

            initMap:function () {
               var self = this;
                self.createMap();//创建地图
                self.setMapEvent();//设置地图事件
                self.addMapControl();//向地图添加控件
                self.addMarker();//向地图中添加marker
            },

            createMap:function () {
                var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                var point = new BMap.Point(113.342982, 23.041294);//定义一个中心点坐标
                map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
                window.map = map;//将map变量存储在全局
            },

            setMapEvent:function () {
                map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                map.enableKeyboard();//启用键盘上下左右键移动地图
            },

            addMapControl:function () {
                var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
                map.addControl(ctrl_nav);
                //向地图中添加缩略图控件
                //向地图中添加比例尺控件
                var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
                map.addControl(ctrl_sca);
            },

            addMarker:function () {
                var self = this;
                for (var i = 0; i < self.markerArr.length; i++) {
                    var json = self.markerArr[i];
                    var p0 = json.point.split("|")[0];
                    var p1 = json.point.split("|")[1];
                    var point = new BMap.Point(p0, p1);
                    var iconImg = self.createIcon(json.icon);
                    var marker = new BMap.Marker(point, {icon: iconImg});
                    var iw = self.createInfoWindow(i);
                    var label = new BMap.Label(json.title, {"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)});
                    marker.setLabel(label);
                    map.addOverlay(marker);
                    label.setStyle({
                        borderColor: "#808080",
                        color: "#333",
                        cursor: "pointer"
                    });

                    (function () {
                        var index = i;
                        var _iw = self.createInfoWindow(i);
                        var _marker = marker;
                        _marker.addEventListener("click", function () {
                            this.openInfoWindow(_iw);
                        });
                        _iw.addEventListener("open", function () {
                            _marker.getLabel().hide();
                        })
                        _iw.addEventListener("close", function () {
                            _marker.getLabel().show();
                        })
                        label.addEventListener("click", function () {
                            _marker.openInfoWindow(_iw);
                        })
                        if (!!json.isOpen) {
                            label.hide();
                            _marker.openInfoWindow(_iw);
                        }
                    })()
                }
            },

            createIcon:function (json) {
                var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
                    imageOffset: new BMap.Size(-json.l, -json.t),
                    infoWindowOffset: new BMap.Size(json.lb + 5, 1),
                    offset: new BMap.Size(json.x, json.h)
                })
                return icon;
            },

            createInfoWindow:function (i) {
                var json = this.markerArr[i];
                var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
                return iw;
            },

            showVew: function () {
                if (this.showModal == true) {
                    this.showModal = !this.showModal;
                }
                if (this.showModal2 == true) {
                    this.showModal2 = !this.showModal2;
                }
                if (this.showcategory == true) {
                    this.showcategory = !this.showcategory;
                }
                this.showModalView = !this.showModalView;
            }
            ,
            hideModal: function () {
                this.showModal = !this.showModal;
                this.showModalView = !this.showModalView;
                this.startPoin = this.traffic1;
                this.startPointRoute1 = this.guide1;
            },
            hideModal2: function () {
                this.showModalView = !this.showModalView;
                this.showModal2 = !this.showModal2;
                this.startPoin = this.traffic2;
                this.startPointRoute2 = this.guide2;
            },
            showtrafficcategory: function () {
                this.showModalView = !this.showModalView;
                this.showcategory = !this.showcategory;
            },
        }


    });
});